<template>
  <div>
    <!-- 组件说明：
          1.组件布局
            同上一个组件
          2.数据绑定
            本组件内所有选择器的option都在option中其余同上一个组件
          3.方法调用
            同上一个组件 -->

   <el-card style="width:100%;height:600px">
     <el-row>
       <el-steps :active=active finish-status="success">
          <el-step title="基础信息">
          </el-step>
          <el-step title="近期异常"></el-step>
          <el-step title="完成"></el-step>
        </el-steps>

        

     </el-row>
      <br><br>
     <el-row>
       
       <el-tabs tab-position="left" style="height: 400px;" v-model="active" >
          <el-tab-pane label="基础信息" @click="next">

          <span >视觉正常否    </span>
            <el-select placeholder="视觉模糊;近期看事物是否产生过模糊感" style="width:33%;margin-left:17px" v-model="form.vb">
                      <el-option
                        v-for="item in options.vboption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                </el-select>
                <br>
                <br>
            <span>体重正常否</span>
            <el-select placeholder="体重衰减;近期体重变化" style="width:33%;margin-left:17px" v-model="form.polydipsia">
             <el-option
                    v-for="item in options.polydipsiaoption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>

           <br>
           <br>
            <span>肌肉状态</span>
                <el-select placeholder="肌肉紧张;近期感到异常肌肉紧绷" style="width:33%;margin-left:17px" v-model="form.pp">
                  <el-option
                    v-for="item in options.ppoption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
      
          <br>
          <br>
          <span>是否患过偏瘫等疾病</span>
            <el-select placeholder="部分偏瘫;部分偏瘫" style="width:33%;margin-left:17px" v-model="form.irritate">
                  <el-option
                    v-for="item in options.irritateoption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                <!-- <br><br>
                <el-button style="margin-top: 12px;" @click="next">下一步</el-button> -->

          </el-tab-pane>
          <el-tab-pane label="近期异常" @click="next">
            <span>烦躁感</span>
                <el-select placeholder="烦躁;近期经常感到异常烦躁" style="width:33%;margin-left:17px" v-model="form.polyphagia">
                  <el-option
                    v-for="item in options.polyphagiaoption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
          <br>
          <br>
            <span>多食感</span>
                <el-select placeholder="多食;近期经常感到异常饥饿" style="width:33%;margin-left:17px" v-model="form.swl">
                  <el-option
                    v-for="item in options.swloption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              <br><br>
              <span>烦渴感</span>      
                <el-select placeholder="烦渴;是否经常不喜欢喝水" style="width:33%;margin-left:17px" v-model="form.polyuria">
                  <el-option
                    v-for="item in options.polyuriaoption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
            <br><br>
            <span>多尿感</span>
                <el-select placeholder="多尿；是否经常多次便尿" style="width:33%;margin-left:17px" v-model="form.gender">
                  <el-option
                    v-for="item in options.genderoption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
          <!-- <br><br>

          <el-button style="margin-top: 12px;" @click="next">下一步</el-button> -->

          </el-tab-pane>



          <el-tab-pane label="提交完成"  @click="next">
            <br>
            <span style=" margin-top: 45px; margin-left: 17px">您已完成信息填写，赶快提交来看一下预测结果吧</span>
            <br><br>
            <el-button style="margin-top: 12px;" @click="open">提交</el-button>
          </el-tab-pane>
      </el-tabs>
     </el-row>

   </el-card>
  </div>
</template>

<script>
import axios from "axios";
import { Message, MessageBox } from "element-ui";

export default {
  data() {
    return {
      // 步骤条的判断
      active: 0,
      selectKeys: [],

      form: {
        gender: "",
        polyuria: "",
        polydipsia: "",
        swl: "",
        polyphagia: "",
        vb: "",
        pp: "",
        irritate: "",
      },
      options: {
        genderoption: [
          {
            value: 0,
            label: "男",
          },
          {
            value: 1,
            label: "女",
          },
        ],
        polyuriaoption: [
          {
            value: 0,
            label: "否",
          },
          {
            value: 1,
            label: "是",
          },
        ],
        polydipsiaoption: [
          {
            value: 0,
            label: "否",
          },
          {
            value: 1,
            label: "是",
          },
        ],
        swloption: [
          {
            value: 0,
            label: "否",
          },
          {
            value: 1,
            label: "是",
          },
        ],
        polyphagiaoption: [
          {
            value: 0,
            label: "否",
          },
          {
            value: 1,
            label: "是",
          },
        ],
        vboption: [
          {
            value: 0,
            label: "否",
          },
          {
            value: 1,
            label: "是",
          },
        ],
        ppoption: [
          {
            value: 0,
            label: "否",
          },
          {
            value: 1,
            label: "是",
          },
        ],
        irritateoption: [
          {
            value: 0,
            label: "否",
          },
          {
            value: 1,
            label: "是",
          },
        ],
      },
    };
  },
  methods: {
    beforeLeave() {
      if (this.selectKeys.length < 3) {
        // this.$msg.error("请求选择商品分类！！");
        return false;
      }

    },
    ceshi(){},
    next(){
      if (this.active++ > 2) this.active = 0;
    },

    open() {
      MessageBox.confirm("请提交前确认已经填写好所有数据", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          Message.success("提交成功!");

          await axios
            .post("/api/22post", JSON.stringify(this.form))
            .then(() => {
              axios.get("/api/22get").then((Response) => {
                console.log(Response.data);
                console.log("获取的数据是");
              
                if (Response.data == 1) {
                  this.$router.push("/tnb_result1");
                }
                if (Response.data == 0) {
                  this.$router.push("/tnb_result0");
                }
              });
              // console.log(this.result)
            })
            .catch(function (error) {
              console.log(error);
            });
        })
        .catch(() => {
          Message.info("已取消提交");
        });

    },
  },
};
</script>

<style>
</style>